<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>[基础]积极拥抱HTML5 | Plana(方案A)</title>
    <meta name="generator" content="VuePress 1.5.2">
    <link rel="icon" href="https://luo0412.gitee.io/static/images/logo/favicon.ico">
    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>$(function () {
    $(".navbar .dropdown-wrapper .title").each(function (index, item) {
        var title = $(item).text() || ""
        console.log(title)
        var index = title.indexOf("(")
        if (index > -1) {
            $(item).text(title.slice(0, index))
        }
    })
})

((window.gitter = {}).chat = {}).options = {
    room: 'luo0412/plana'
};</script>
    <script src="https://sidecar.gitter.im/dist/sidecar.v1.js"></script>
    <meta name="description" content="方案A">
    <link rel="preload" href="/plana/assets/css/0.styles.e9cba6b3.css" as="style"><link rel="preload" href="/plana/assets/js/app.26a35d46.js" as="script"><link rel="preload" href="/plana/assets/js/2.b5bc497d.js" as="script"><link rel="preload" href="/plana/assets/js/338.40b3bfdb.js" as="script"><link rel="prefetch" href="/plana/assets/js/10.76967f04.js"><link rel="prefetch" href="/plana/assets/js/100.5188df2c.js"><link rel="prefetch" href="/plana/assets/js/101.d84c20f9.js"><link rel="prefetch" href="/plana/assets/js/102.dcbad92b.js"><link rel="prefetch" href="/plana/assets/js/103.cbf31594.js"><link rel="prefetch" href="/plana/assets/js/104.227d809c.js"><link rel="prefetch" href="/plana/assets/js/105.4690789d.js"><link rel="prefetch" href="/plana/assets/js/106.76527743.js"><link rel="prefetch" href="/plana/assets/js/107.d6e3a4d6.js"><link rel="prefetch" href="/plana/assets/js/108.6e4c8bfc.js"><link rel="prefetch" href="/plana/assets/js/109.fc12471e.js"><link rel="prefetch" href="/plana/assets/js/11.569e93dd.js"><link rel="prefetch" href="/plana/assets/js/110.85c3d834.js"><link rel="prefetch" href="/plana/assets/js/111.9c605bc7.js"><link rel="prefetch" href="/plana/assets/js/112.12b9e5d6.js"><link rel="prefetch" href="/plana/assets/js/113.21ac7878.js"><link rel="prefetch" href="/plana/assets/js/114.e4dd9de7.js"><link rel="prefetch" href="/plana/assets/js/115.8600fa46.js"><link rel="prefetch" href="/plana/assets/js/116.043898d2.js"><link rel="prefetch" href="/plana/assets/js/117.5c6253ed.js"><link rel="prefetch" href="/plana/assets/js/118.0deaa07b.js"><link rel="prefetch" href="/plana/assets/js/119.0e1b78e7.js"><link rel="prefetch" href="/plana/assets/js/12.f97471e0.js"><link rel="prefetch" href="/plana/assets/js/120.da2dcbe4.js"><link rel="prefetch" href="/plana/assets/js/121.b67072a1.js"><link rel="prefetch" href="/plana/assets/js/122.4438dfd8.js"><link rel="prefetch" href="/plana/assets/js/123.ffb881d0.js"><link rel="prefetch" href="/plana/assets/js/124.ae643d5d.js"><link rel="prefetch" href="/plana/assets/js/125.782ff172.js"><link rel="prefetch" href="/plana/assets/js/126.9cb23b0a.js"><link rel="prefetch" href="/plana/assets/js/127.2c5e040e.js"><link rel="prefetch" href="/plana/assets/js/128.f96c3297.js"><link rel="prefetch" href="/plana/assets/js/129.379dad87.js"><link rel="prefetch" href="/plana/assets/js/13.40058c53.js"><link rel="prefetch" href="/plana/assets/js/130.f350d8cd.js"><link rel="prefetch" href="/plana/assets/js/131.9b494f44.js"><link rel="prefetch" href="/plana/assets/js/132.8a6c409e.js"><link rel="prefetch" href="/plana/assets/js/133.c691db55.js"><link rel="prefetch" href="/plana/assets/js/134.e8d8a94a.js"><link rel="prefetch" href="/plana/assets/js/135.c95a1ef6.js"><link rel="prefetch" href="/plana/assets/js/136.bdd4250b.js"><link rel="prefetch" href="/plana/assets/js/137.539d6db6.js"><link rel="prefetch" href="/plana/assets/js/138.c16e3cc1.js"><link rel="prefetch" href="/plana/assets/js/139.7a1243ca.js"><link rel="prefetch" href="/plana/assets/js/14.880c2d4f.js"><link rel="prefetch" href="/plana/assets/js/140.6ed0a182.js"><link rel="prefetch" href="/plana/assets/js/141.a984158d.js"><link rel="prefetch" href="/plana/assets/js/142.e094f73f.js"><link rel="prefetch" href="/plana/assets/js/143.760a5510.js"><link rel="prefetch" href="/plana/assets/js/144.212ede62.js"><link rel="prefetch" href="/plana/assets/js/145.2e06e4c9.js"><link rel="prefetch" href="/plana/assets/js/146.16713494.js"><link rel="prefetch" href="/plana/assets/js/147.7b0585c3.js"><link rel="prefetch" href="/plana/assets/js/148.ae82990b.js"><link rel="prefetch" href="/plana/assets/js/149.73a7c703.js"><link rel="prefetch" href="/plana/assets/js/15.5364aa14.js"><link rel="prefetch" href="/plana/assets/js/150.fec18e0b.js"><link rel="prefetch" href="/plana/assets/js/151.14bf6cea.js"><link rel="prefetch" href="/plana/assets/js/152.17f17b04.js"><link rel="prefetch" href="/plana/assets/js/153.ba7c5f21.js"><link rel="prefetch" href="/plana/assets/js/154.d3340db4.js"><link rel="prefetch" href="/plana/assets/js/155.2bf1dbde.js"><link rel="prefetch" href="/plana/assets/js/156.70d23de7.js"><link rel="prefetch" href="/plana/assets/js/157.93a62465.js"><link rel="prefetch" href="/plana/assets/js/158.bf486b60.js"><link rel="prefetch" href="/plana/assets/js/159.f19e7955.js"><link rel="prefetch" href="/plana/assets/js/16.e96c9bd3.js"><link rel="prefetch" href="/plana/assets/js/160.3dc61d59.js"><link rel="prefetch" href="/plana/assets/js/161.0fff4227.js"><link rel="prefetch" href="/plana/assets/js/162.70526488.js"><link rel="prefetch" href="/plana/assets/js/163.faa79f0a.js"><link rel="prefetch" href="/plana/assets/js/164.9c80b5bb.js"><link rel="prefetch" href="/plana/assets/js/165.7f9b0124.js"><link rel="prefetch" href="/plana/assets/js/166.36435978.js"><link rel="prefetch" href="/plana/assets/js/167.feea7028.js"><link rel="prefetch" href="/plana/assets/js/168.cc504d5f.js"><link rel="prefetch" href="/plana/assets/js/169.ec7d4b8a.js"><link rel="prefetch" href="/plana/assets/js/17.07c08387.js"><link rel="prefetch" href="/plana/assets/js/170.a8b4b58d.js"><link rel="prefetch" href="/plana/assets/js/171.2329fa88.js"><link rel="prefetch" href="/plana/assets/js/172.286ac28f.js"><link rel="prefetch" href="/plana/assets/js/173.a692852e.js"><link rel="prefetch" href="/plana/assets/js/174.a39922f0.js"><link rel="prefetch" href="/plana/assets/js/175.b47f1b23.js"><link rel="prefetch" href="/plana/assets/js/176.86486ead.js"><link rel="prefetch" href="/plana/assets/js/177.40f1c5b7.js"><link rel="prefetch" href="/plana/assets/js/178.7a9ca10d.js"><link rel="prefetch" href="/plana/assets/js/179.19051ac2.js"><link rel="prefetch" href="/plana/assets/js/18.e433f8d3.js"><link rel="prefetch" href="/plana/assets/js/180.57d0c928.js"><link rel="prefetch" href="/plana/assets/js/181.00da0f3d.js"><link rel="prefetch" href="/plana/assets/js/182.cadb79df.js"><link rel="prefetch" href="/plana/assets/js/183.8dd3881a.js"><link rel="prefetch" href="/plana/assets/js/184.1222a110.js"><link rel="prefetch" href="/plana/assets/js/185.7d9330c8.js"><link rel="prefetch" href="/plana/assets/js/186.d6ddbb60.js"><link rel="prefetch" href="/plana/assets/js/187.f19bfcc2.js"><link rel="prefetch" href="/plana/assets/js/188.b801053a.js"><link rel="prefetch" href="/plana/assets/js/189.9bf68bd8.js"><link rel="prefetch" href="/plana/assets/js/19.0f82fe28.js"><link rel="prefetch" href="/plana/assets/js/190.158c0b50.js"><link rel="prefetch" href="/plana/assets/js/191.cdca9aef.js"><link rel="prefetch" href="/plana/assets/js/192.84164400.js"><link rel="prefetch" href="/plana/assets/js/193.6fee8315.js"><link rel="prefetch" href="/plana/assets/js/194.646a3bc9.js"><link rel="prefetch" href="/plana/assets/js/195.f63862f4.js"><link rel="prefetch" href="/plana/assets/js/196.4b0d972c.js"><link rel="prefetch" href="/plana/assets/js/197.e706ce3c.js"><link rel="prefetch" href="/plana/assets/js/198.8b9720bf.js"><link rel="prefetch" href="/plana/assets/js/199.49a5e793.js"><link rel="prefetch" href="/plana/assets/js/20.619cb712.js"><link rel="prefetch" href="/plana/assets/js/200.ef546dd9.js"><link rel="prefetch" href="/plana/assets/js/201.479054ec.js"><link rel="prefetch" href="/plana/assets/js/202.0b3389ee.js"><link rel="prefetch" href="/plana/assets/js/203.22150890.js"><link rel="prefetch" href="/plana/assets/js/204.2dc71336.js"><link rel="prefetch" href="/plana/assets/js/205.e377c245.js"><link rel="prefetch" href="/plana/assets/js/206.1ace4feb.js"><link rel="prefetch" href="/plana/assets/js/207.323fa10a.js"><link rel="prefetch" href="/plana/assets/js/208.e353a6ec.js"><link rel="prefetch" href="/plana/assets/js/209.316ac6f0.js"><link rel="prefetch" href="/plana/assets/js/21.d91a849c.js"><link rel="prefetch" href="/plana/assets/js/210.d4f18535.js"><link rel="prefetch" href="/plana/assets/js/211.573c492b.js"><link rel="prefetch" href="/plana/assets/js/212.b2a16387.js"><link rel="prefetch" href="/plana/assets/js/213.c2fac0b1.js"><link rel="prefetch" href="/plana/assets/js/214.79b62576.js"><link rel="prefetch" href="/plana/assets/js/215.fe6c3e10.js"><link rel="prefetch" href="/plana/assets/js/216.18f410e2.js"><link rel="prefetch" href="/plana/assets/js/217.20c9e9eb.js"><link rel="prefetch" href="/plana/assets/js/218.a0eeeb7c.js"><link rel="prefetch" href="/plana/assets/js/219.b956aca7.js"><link rel="prefetch" href="/plana/assets/js/22.366fc766.js"><link rel="prefetch" href="/plana/assets/js/220.5ed5e277.js"><link rel="prefetch" href="/plana/assets/js/221.468f9087.js"><link rel="prefetch" href="/plana/assets/js/222.638dc5f6.js"><link rel="prefetch" href="/plana/assets/js/223.0fad689f.js"><link rel="prefetch" href="/plana/assets/js/224.61ad16fd.js"><link rel="prefetch" href="/plana/assets/js/225.91089e6c.js"><link rel="prefetch" href="/plana/assets/js/226.2f0d158a.js"><link rel="prefetch" href="/plana/assets/js/227.43288d9d.js"><link rel="prefetch" href="/plana/assets/js/228.4bff0625.js"><link rel="prefetch" href="/plana/assets/js/229.9c3666b2.js"><link rel="prefetch" href="/plana/assets/js/23.d2ecdcc9.js"><link rel="prefetch" href="/plana/assets/js/230.b52057f9.js"><link rel="prefetch" href="/plana/assets/js/231.cc0ed124.js"><link rel="prefetch" href="/plana/assets/js/232.9ad374c5.js"><link rel="prefetch" href="/plana/assets/js/233.d794c11f.js"><link rel="prefetch" href="/plana/assets/js/234.26ac8fbc.js"><link rel="prefetch" href="/plana/assets/js/235.41250663.js"><link rel="prefetch" href="/plana/assets/js/236.881374a2.js"><link rel="prefetch" href="/plana/assets/js/237.c7bd84e0.js"><link rel="prefetch" href="/plana/assets/js/238.98726af2.js"><link rel="prefetch" href="/plana/assets/js/239.9f11e102.js"><link rel="prefetch" href="/plana/assets/js/24.02b55c75.js"><link rel="prefetch" href="/plana/assets/js/240.a7cac4ef.js"><link rel="prefetch" href="/plana/assets/js/241.462a960b.js"><link rel="prefetch" href="/plana/assets/js/242.7cf42754.js"><link rel="prefetch" href="/plana/assets/js/243.b3d1619f.js"><link rel="prefetch" href="/plana/assets/js/244.40da516b.js"><link rel="prefetch" href="/plana/assets/js/245.ada0c168.js"><link rel="prefetch" href="/plana/assets/js/246.38614800.js"><link rel="prefetch" href="/plana/assets/js/247.491612a2.js"><link rel="prefetch" href="/plana/assets/js/248.23741832.js"><link rel="prefetch" href="/plana/assets/js/249.90624a3a.js"><link rel="prefetch" href="/plana/assets/js/25.96e9e495.js"><link rel="prefetch" href="/plana/assets/js/250.f5946779.js"><link rel="prefetch" href="/plana/assets/js/251.58091edf.js"><link rel="prefetch" href="/plana/assets/js/252.fbe32ae4.js"><link rel="prefetch" href="/plana/assets/js/253.1cdd8f1c.js"><link rel="prefetch" href="/plana/assets/js/254.651e7bc6.js"><link rel="prefetch" href="/plana/assets/js/255.58aaa830.js"><link rel="prefetch" href="/plana/assets/js/256.08653b0a.js"><link rel="prefetch" href="/plana/assets/js/257.18da3dda.js"><link rel="prefetch" href="/plana/assets/js/258.e639b138.js"><link rel="prefetch" href="/plana/assets/js/259.9a2ccdd8.js"><link rel="prefetch" href="/plana/assets/js/26.786f768e.js"><link rel="prefetch" href="/plana/assets/js/260.1ffec687.js"><link rel="prefetch" href="/plana/assets/js/261.6f007b8c.js"><link rel="prefetch" href="/plana/assets/js/262.eebd1210.js"><link rel="prefetch" href="/plana/assets/js/263.1672d254.js"><link rel="prefetch" href="/plana/assets/js/264.a786f2f0.js"><link rel="prefetch" href="/plana/assets/js/265.b08f361a.js"><link rel="prefetch" href="/plana/assets/js/266.6b9c1b18.js"><link rel="prefetch" href="/plana/assets/js/267.05341052.js"><link rel="prefetch" href="/plana/assets/js/268.2b47894a.js"><link rel="prefetch" href="/plana/assets/js/269.b00e1745.js"><link rel="prefetch" href="/plana/assets/js/27.d95cd926.js"><link rel="prefetch" href="/plana/assets/js/270.f09aa40d.js"><link rel="prefetch" href="/plana/assets/js/271.036eefbf.js"><link rel="prefetch" href="/plana/assets/js/272.685451a2.js"><link rel="prefetch" href="/plana/assets/js/273.489debcf.js"><link rel="prefetch" href="/plana/assets/js/274.3f824bc5.js"><link rel="prefetch" href="/plana/assets/js/275.d3661899.js"><link rel="prefetch" href="/plana/assets/js/276.0dd18e5e.js"><link rel="prefetch" href="/plana/assets/js/277.1ec17e71.js"><link rel="prefetch" href="/plana/assets/js/278.6379871f.js"><link rel="prefetch" href="/plana/assets/js/279.a0692e92.js"><link rel="prefetch" href="/plana/assets/js/28.c63f738d.js"><link rel="prefetch" href="/plana/assets/js/280.34932565.js"><link rel="prefetch" href="/plana/assets/js/281.ae742fd5.js"><link rel="prefetch" href="/plana/assets/js/282.715175d9.js"><link rel="prefetch" href="/plana/assets/js/283.9b6a3e34.js"><link rel="prefetch" href="/plana/assets/js/284.00628265.js"><link rel="prefetch" href="/plana/assets/js/285.3de0dd73.js"><link rel="prefetch" href="/plana/assets/js/286.6a2d6c2a.js"><link rel="prefetch" href="/plana/assets/js/287.74cdf243.js"><link rel="prefetch" href="/plana/assets/js/288.42fdbe73.js"><link rel="prefetch" href="/plana/assets/js/289.f4afe8dc.js"><link rel="prefetch" href="/plana/assets/js/29.84c2f6be.js"><link rel="prefetch" href="/plana/assets/js/290.6fad3c29.js"><link rel="prefetch" href="/plana/assets/js/291.b0ad0381.js"><link rel="prefetch" href="/plana/assets/js/292.888b58ac.js"><link rel="prefetch" href="/plana/assets/js/293.1ed605a6.js"><link rel="prefetch" href="/plana/assets/js/294.3af3dec3.js"><link rel="prefetch" href="/plana/assets/js/295.db08edcf.js"><link rel="prefetch" href="/plana/assets/js/296.e4837fb2.js"><link rel="prefetch" href="/plana/assets/js/297.25eb8cb6.js"><link rel="prefetch" href="/plana/assets/js/298.4948e1d0.js"><link rel="prefetch" href="/plana/assets/js/299.56ff4927.js"><link rel="prefetch" href="/plana/assets/js/3.27803fd3.js"><link rel="prefetch" href="/plana/assets/js/30.a9337659.js"><link rel="prefetch" href="/plana/assets/js/300.8dad7bd4.js"><link rel="prefetch" href="/plana/assets/js/301.1d0bd3b7.js"><link rel="prefetch" href="/plana/assets/js/302.24c7060b.js"><link rel="prefetch" href="/plana/assets/js/303.a4a7908d.js"><link rel="prefetch" href="/plana/assets/js/304.d5a32c16.js"><link rel="prefetch" href="/plana/assets/js/305.eb22a5e4.js"><link rel="prefetch" href="/plana/assets/js/306.cdaa56b9.js"><link rel="prefetch" href="/plana/assets/js/307.f7e38353.js"><link rel="prefetch" href="/plana/assets/js/308.3f3f49e6.js"><link rel="prefetch" href="/plana/assets/js/309.ba1c34b9.js"><link rel="prefetch" href="/plana/assets/js/31.f4ff74a7.js"><link rel="prefetch" href="/plana/assets/js/310.06e88629.js"><link rel="prefetch" href="/plana/assets/js/311.7cadacd8.js"><link rel="prefetch" href="/plana/assets/js/312.36004dd0.js"><link rel="prefetch" href="/plana/assets/js/313.efb51116.js"><link rel="prefetch" href="/plana/assets/js/314.55c74d14.js"><link rel="prefetch" href="/plana/assets/js/315.fc4d91f4.js"><link rel="prefetch" href="/plana/assets/js/316.dde0feb1.js"><link rel="prefetch" href="/plana/assets/js/317.ef59c7dd.js"><link rel="prefetch" href="/plana/assets/js/318.9c8514de.js"><link rel="prefetch" href="/plana/assets/js/319.e934bf23.js"><link rel="prefetch" href="/plana/assets/js/32.611da568.js"><link rel="prefetch" href="/plana/assets/js/320.2c3bf800.js"><link rel="prefetch" href="/plana/assets/js/321.2f166a58.js"><link rel="prefetch" href="/plana/assets/js/322.2727112d.js"><link rel="prefetch" href="/plana/assets/js/323.987dae09.js"><link rel="prefetch" href="/plana/assets/js/324.059197e5.js"><link rel="prefetch" href="/plana/assets/js/325.251603a9.js"><link rel="prefetch" href="/plana/assets/js/326.b9aa9786.js"><link rel="prefetch" href="/plana/assets/js/327.83df42f2.js"><link rel="prefetch" href="/plana/assets/js/328.437841b5.js"><link rel="prefetch" href="/plana/assets/js/329.4705178f.js"><link rel="prefetch" href="/plana/assets/js/33.04179be5.js"><link rel="prefetch" href="/plana/assets/js/330.7fefbd39.js"><link rel="prefetch" href="/plana/assets/js/331.324b88a4.js"><link rel="prefetch" href="/plana/assets/js/332.9dbc0a0f.js"><link rel="prefetch" href="/plana/assets/js/333.a9f4ba89.js"><link rel="prefetch" href="/plana/assets/js/334.bfc521ff.js"><link rel="prefetch" href="/plana/assets/js/335.ea772c69.js"><link rel="prefetch" href="/plana/assets/js/336.3c139a73.js"><link rel="prefetch" href="/plana/assets/js/337.4b7b5285.js"><link rel="prefetch" href="/plana/assets/js/339.bf0c2419.js"><link rel="prefetch" href="/plana/assets/js/34.7d7532c6.js"><link rel="prefetch" href="/plana/assets/js/340.9ceb2f7a.js"><link rel="prefetch" href="/plana/assets/js/341.bc48efb9.js"><link rel="prefetch" href="/plana/assets/js/342.75077914.js"><link rel="prefetch" href="/plana/assets/js/343.efda7d56.js"><link rel="prefetch" href="/plana/assets/js/344.31c0f3c6.js"><link rel="prefetch" href="/plana/assets/js/345.7fb06b95.js"><link rel="prefetch" href="/plana/assets/js/346.55ccf355.js"><link rel="prefetch" href="/plana/assets/js/347.98aa9eab.js"><link rel="prefetch" href="/plana/assets/js/348.878dac49.js"><link rel="prefetch" href="/plana/assets/js/349.878acfca.js"><link rel="prefetch" href="/plana/assets/js/35.a56a078a.js"><link rel="prefetch" href="/plana/assets/js/350.67d85dec.js"><link rel="prefetch" href="/plana/assets/js/351.fe864f55.js"><link rel="prefetch" href="/plana/assets/js/352.0140a20d.js"><link rel="prefetch" href="/plana/assets/js/353.1a2bdf26.js"><link rel="prefetch" href="/plana/assets/js/354.e698b263.js"><link rel="prefetch" href="/plana/assets/js/355.69178048.js"><link rel="prefetch" href="/plana/assets/js/356.13571020.js"><link rel="prefetch" href="/plana/assets/js/357.666a6e4e.js"><link rel="prefetch" href="/plana/assets/js/358.3a859aae.js"><link rel="prefetch" href="/plana/assets/js/359.e6291586.js"><link rel="prefetch" href="/plana/assets/js/36.6b2c1c06.js"><link rel="prefetch" href="/plana/assets/js/360.553be648.js"><link rel="prefetch" href="/plana/assets/js/361.f674d762.js"><link rel="prefetch" href="/plana/assets/js/362.41696f0b.js"><link rel="prefetch" href="/plana/assets/js/363.db6b18e5.js"><link rel="prefetch" href="/plana/assets/js/364.f4ef8d66.js"><link rel="prefetch" href="/plana/assets/js/365.060bb2cd.js"><link rel="prefetch" href="/plana/assets/js/366.af8be9cf.js"><link rel="prefetch" href="/plana/assets/js/367.89b9bd1a.js"><link rel="prefetch" href="/plana/assets/js/368.4a0db9f9.js"><link rel="prefetch" href="/plana/assets/js/369.0f137c05.js"><link rel="prefetch" href="/plana/assets/js/37.a372e2ff.js"><link rel="prefetch" href="/plana/assets/js/370.d0503cfb.js"><link rel="prefetch" href="/plana/assets/js/371.a5a61f6c.js"><link rel="prefetch" href="/plana/assets/js/372.a8beeec6.js"><link rel="prefetch" href="/plana/assets/js/373.52486327.js"><link rel="prefetch" href="/plana/assets/js/374.becb79ef.js"><link rel="prefetch" href="/plana/assets/js/375.adbe845a.js"><link rel="prefetch" href="/plana/assets/js/376.0b725de7.js"><link rel="prefetch" href="/plana/assets/js/377.6d0755e8.js"><link rel="prefetch" href="/plana/assets/js/378.9899dca3.js"><link rel="prefetch" href="/plana/assets/js/379.8567246b.js"><link rel="prefetch" href="/plana/assets/js/38.bf139dae.js"><link rel="prefetch" href="/plana/assets/js/380.fff3aeb0.js"><link rel="prefetch" href="/plana/assets/js/381.5d8ddb4d.js"><link rel="prefetch" href="/plana/assets/js/382.ebb79c48.js"><link rel="prefetch" href="/plana/assets/js/383.b1d8b5be.js"><link rel="prefetch" href="/plana/assets/js/384.b8ef0439.js"><link rel="prefetch" href="/plana/assets/js/385.274ad089.js"><link rel="prefetch" href="/plana/assets/js/386.8dc07401.js"><link rel="prefetch" href="/plana/assets/js/387.aea18e98.js"><link rel="prefetch" href="/plana/assets/js/388.1ef06a0b.js"><link rel="prefetch" href="/plana/assets/js/389.9d65f18d.js"><link rel="prefetch" href="/plana/assets/js/39.5a4f8e59.js"><link rel="prefetch" href="/plana/assets/js/390.6bd12dc7.js"><link rel="prefetch" href="/plana/assets/js/391.6ef66911.js"><link rel="prefetch" href="/plana/assets/js/392.ffba56bb.js"><link rel="prefetch" href="/plana/assets/js/393.a5fc8fba.js"><link rel="prefetch" href="/plana/assets/js/394.6ab7521b.js"><link rel="prefetch" href="/plana/assets/js/395.3ab7f171.js"><link rel="prefetch" href="/plana/assets/js/396.0791500c.js"><link rel="prefetch" href="/plana/assets/js/397.28bf46c8.js"><link rel="prefetch" href="/plana/assets/js/398.7807db8d.js"><link rel="prefetch" href="/plana/assets/js/399.4d403b1b.js"><link rel="prefetch" href="/plana/assets/js/4.6af04a85.js"><link rel="prefetch" href="/plana/assets/js/40.43e4b38f.js"><link rel="prefetch" href="/plana/assets/js/400.c888a05f.js"><link rel="prefetch" href="/plana/assets/js/401.6dfdc401.js"><link rel="prefetch" href="/plana/assets/js/402.2836e580.js"><link rel="prefetch" href="/plana/assets/js/403.a8ec3c75.js"><link rel="prefetch" href="/plana/assets/js/404.5858ee05.js"><link rel="prefetch" href="/plana/assets/js/405.4fd5cbce.js"><link rel="prefetch" href="/plana/assets/js/406.059c34fc.js"><link rel="prefetch" href="/plana/assets/js/407.1991324f.js"><link rel="prefetch" href="/plana/assets/js/408.57f13ab2.js"><link rel="prefetch" href="/plana/assets/js/409.b3fdbf19.js"><link rel="prefetch" href="/plana/assets/js/41.baf41ad2.js"><link rel="prefetch" href="/plana/assets/js/410.1c66b59b.js"><link rel="prefetch" href="/plana/assets/js/411.89daa103.js"><link rel="prefetch" href="/plana/assets/js/412.5fd17d05.js"><link rel="prefetch" href="/plana/assets/js/413.67df2b20.js"><link rel="prefetch" href="/plana/assets/js/414.7c1feaab.js"><link rel="prefetch" href="/plana/assets/js/415.e07db45d.js"><link rel="prefetch" href="/plana/assets/js/416.fe7e2c62.js"><link rel="prefetch" href="/plana/assets/js/417.c9f94e9c.js"><link rel="prefetch" href="/plana/assets/js/418.18704cfc.js"><link rel="prefetch" href="/plana/assets/js/419.9f113e64.js"><link rel="prefetch" href="/plana/assets/js/42.f2884796.js"><link rel="prefetch" href="/plana/assets/js/420.2a5f3a3f.js"><link rel="prefetch" href="/plana/assets/js/421.1b110d49.js"><link rel="prefetch" href="/plana/assets/js/422.b836f5a4.js"><link rel="prefetch" href="/plana/assets/js/423.9fa437af.js"><link rel="prefetch" href="/plana/assets/js/424.0fc0a623.js"><link rel="prefetch" href="/plana/assets/js/425.4bee6afc.js"><link rel="prefetch" href="/plana/assets/js/426.036d5a1b.js"><link rel="prefetch" href="/plana/assets/js/427.f2a1aa48.js"><link rel="prefetch" href="/plana/assets/js/428.fc22796c.js"><link rel="prefetch" href="/plana/assets/js/429.b6acfba5.js"><link rel="prefetch" href="/plana/assets/js/43.7aa39e52.js"><link rel="prefetch" href="/plana/assets/js/430.ed97aa43.js"><link rel="prefetch" href="/plana/assets/js/431.2fc0d4e3.js"><link rel="prefetch" href="/plana/assets/js/432.43115b63.js"><link rel="prefetch" href="/plana/assets/js/433.a1c3b83a.js"><link rel="prefetch" href="/plana/assets/js/434.ee152248.js"><link rel="prefetch" href="/plana/assets/js/435.24976c8a.js"><link rel="prefetch" href="/plana/assets/js/436.59dd1ab1.js"><link rel="prefetch" href="/plana/assets/js/437.50136991.js"><link rel="prefetch" href="/plana/assets/js/438.5eb6bf82.js"><link rel="prefetch" href="/plana/assets/js/439.9e310ae5.js"><link rel="prefetch" href="/plana/assets/js/44.ea8da77b.js"><link rel="prefetch" href="/plana/assets/js/440.2457f927.js"><link rel="prefetch" href="/plana/assets/js/441.fbc13ad6.js"><link rel="prefetch" href="/plana/assets/js/442.d130c4b3.js"><link rel="prefetch" href="/plana/assets/js/443.1f900823.js"><link rel="prefetch" href="/plana/assets/js/444.3834d598.js"><link rel="prefetch" href="/plana/assets/js/445.16932093.js"><link rel="prefetch" href="/plana/assets/js/446.24711545.js"><link rel="prefetch" href="/plana/assets/js/447.568b3f96.js"><link rel="prefetch" href="/plana/assets/js/448.8883fa0d.js"><link rel="prefetch" href="/plana/assets/js/449.f6184633.js"><link rel="prefetch" href="/plana/assets/js/45.73a9f625.js"><link rel="prefetch" href="/plana/assets/js/450.a996511c.js"><link rel="prefetch" href="/plana/assets/js/451.1b1843f7.js"><link rel="prefetch" href="/plana/assets/js/452.0be6db8b.js"><link rel="prefetch" href="/plana/assets/js/453.2c9eca27.js"><link rel="prefetch" href="/plana/assets/js/454.43d6b922.js"><link rel="prefetch" href="/plana/assets/js/455.798dc8d2.js"><link rel="prefetch" href="/plana/assets/js/456.5294aa61.js"><link rel="prefetch" href="/plana/assets/js/457.582336be.js"><link rel="prefetch" href="/plana/assets/js/458.3ae86239.js"><link rel="prefetch" href="/plana/assets/js/459.17fe935e.js"><link rel="prefetch" href="/plana/assets/js/46.6c8e3280.js"><link rel="prefetch" href="/plana/assets/js/460.e3ca3d89.js"><link rel="prefetch" href="/plana/assets/js/461.9f892ebc.js"><link rel="prefetch" href="/plana/assets/js/462.57d0ad29.js"><link rel="prefetch" href="/plana/assets/js/463.a1965841.js"><link rel="prefetch" href="/plana/assets/js/464.d0da0b56.js"><link rel="prefetch" href="/plana/assets/js/465.6cb0dd50.js"><link rel="prefetch" href="/plana/assets/js/466.272ea41f.js"><link rel="prefetch" href="/plana/assets/js/467.9c04d6bf.js"><link rel="prefetch" href="/plana/assets/js/468.b91655c9.js"><link rel="prefetch" href="/plana/assets/js/469.e4727b4f.js"><link rel="prefetch" href="/plana/assets/js/47.3909e74a.js"><link rel="prefetch" href="/plana/assets/js/470.b11beb41.js"><link rel="prefetch" href="/plana/assets/js/471.4753cb89.js"><link rel="prefetch" href="/plana/assets/js/472.29077ff8.js"><link rel="prefetch" href="/plana/assets/js/473.a653331c.js"><link rel="prefetch" href="/plana/assets/js/474.2a8fae88.js"><link rel="prefetch" href="/plana/assets/js/475.9b78390f.js"><link rel="prefetch" href="/plana/assets/js/476.9e13c339.js"><link rel="prefetch" href="/plana/assets/js/477.05a2179e.js"><link rel="prefetch" href="/plana/assets/js/478.9c4f06c9.js"><link rel="prefetch" href="/plana/assets/js/479.559e2b93.js"><link rel="prefetch" href="/plana/assets/js/48.be057863.js"><link rel="prefetch" href="/plana/assets/js/480.ec41e7ce.js"><link rel="prefetch" href="/plana/assets/js/481.113c6aa3.js"><link rel="prefetch" href="/plana/assets/js/482.40e20309.js"><link rel="prefetch" href="/plana/assets/js/483.689e3d97.js"><link rel="prefetch" href="/plana/assets/js/484.069ebf35.js"><link rel="prefetch" href="/plana/assets/js/485.9e7bd20f.js"><link rel="prefetch" href="/plana/assets/js/486.c163809d.js"><link rel="prefetch" href="/plana/assets/js/487.acdd4863.js"><link rel="prefetch" href="/plana/assets/js/488.6075f8e7.js"><link rel="prefetch" href="/plana/assets/js/489.77207a01.js"><link rel="prefetch" href="/plana/assets/js/49.64cd900d.js"><link rel="prefetch" href="/plana/assets/js/490.2bb176f4.js"><link rel="prefetch" href="/plana/assets/js/491.07e739a2.js"><link rel="prefetch" href="/plana/assets/js/492.e07a5eee.js"><link rel="prefetch" href="/plana/assets/js/493.333ffb97.js"><link rel="prefetch" href="/plana/assets/js/494.ef208677.js"><link rel="prefetch" href="/plana/assets/js/495.a1f2d8cb.js"><link rel="prefetch" href="/plana/assets/js/496.6f6a823a.js"><link rel="prefetch" href="/plana/assets/js/497.c44b60d1.js"><link rel="prefetch" href="/plana/assets/js/498.2b898143.js"><link rel="prefetch" href="/plana/assets/js/499.366c11df.js"><link rel="prefetch" href="/plana/assets/js/5.6d71262c.js"><link rel="prefetch" href="/plana/assets/js/50.b2d0e32a.js"><link rel="prefetch" href="/plana/assets/js/500.c2769d0d.js"><link rel="prefetch" href="/plana/assets/js/501.5db31a91.js"><link rel="prefetch" href="/plana/assets/js/502.6550f71c.js"><link rel="prefetch" href="/plana/assets/js/503.bcac8e8e.js"><link rel="prefetch" href="/plana/assets/js/504.defc6a0c.js"><link rel="prefetch" href="/plana/assets/js/505.6db6e3e2.js"><link rel="prefetch" href="/plana/assets/js/506.1be6db54.js"><link rel="prefetch" href="/plana/assets/js/507.e3063e28.js"><link rel="prefetch" href="/plana/assets/js/508.9fcc5bc1.js"><link rel="prefetch" href="/plana/assets/js/509.69b407c9.js"><link rel="prefetch" href="/plana/assets/js/51.98c6fcd6.js"><link rel="prefetch" href="/plana/assets/js/510.78cc9b58.js"><link rel="prefetch" href="/plana/assets/js/511.890e750c.js"><link rel="prefetch" href="/plana/assets/js/512.54f5237b.js"><link rel="prefetch" href="/plana/assets/js/513.71e81daf.js"><link rel="prefetch" href="/plana/assets/js/514.43eff2c4.js"><link rel="prefetch" href="/plana/assets/js/515.267a0ebd.js"><link rel="prefetch" href="/plana/assets/js/516.619a751e.js"><link rel="prefetch" href="/plana/assets/js/517.7e7b4f57.js"><link rel="prefetch" href="/plana/assets/js/518.4b5b069f.js"><link rel="prefetch" href="/plana/assets/js/519.cecd2dba.js"><link rel="prefetch" href="/plana/assets/js/52.51175da9.js"><link rel="prefetch" href="/plana/assets/js/520.d61eaea1.js"><link rel="prefetch" href="/plana/assets/js/521.1bdd256d.js"><link rel="prefetch" href="/plana/assets/js/522.9eb89cb1.js"><link rel="prefetch" href="/plana/assets/js/523.c21b0f67.js"><link rel="prefetch" href="/plana/assets/js/524.e8e2b891.js"><link rel="prefetch" href="/plana/assets/js/525.5d527982.js"><link rel="prefetch" href="/plana/assets/js/526.06ac5112.js"><link rel="prefetch" href="/plana/assets/js/527.9fb3036e.js"><link rel="prefetch" href="/plana/assets/js/528.fc9e2c1b.js"><link rel="prefetch" href="/plana/assets/js/529.9334c6ad.js"><link rel="prefetch" href="/plana/assets/js/53.4db53b65.js"><link rel="prefetch" href="/plana/assets/js/530.d069e448.js"><link rel="prefetch" href="/plana/assets/js/531.6b5d9a6c.js"><link rel="prefetch" href="/plana/assets/js/532.b288face.js"><link rel="prefetch" href="/plana/assets/js/533.dd36700a.js"><link rel="prefetch" href="/plana/assets/js/534.430379e3.js"><link rel="prefetch" href="/plana/assets/js/535.5b1ec919.js"><link rel="prefetch" href="/plana/assets/js/536.62d48a69.js"><link rel="prefetch" href="/plana/assets/js/537.e4ba4cc0.js"><link rel="prefetch" href="/plana/assets/js/538.2ba0b7b5.js"><link rel="prefetch" href="/plana/assets/js/539.44d94e0a.js"><link rel="prefetch" href="/plana/assets/js/54.4ecc183c.js"><link rel="prefetch" href="/plana/assets/js/540.58126542.js"><link rel="prefetch" href="/plana/assets/js/541.8a2719d4.js"><link rel="prefetch" href="/plana/assets/js/542.63823f7d.js"><link rel="prefetch" href="/plana/assets/js/543.fd601531.js"><link rel="prefetch" href="/plana/assets/js/544.c2d41a95.js"><link rel="prefetch" href="/plana/assets/js/545.c0f15057.js"><link rel="prefetch" href="/plana/assets/js/546.752d4411.js"><link rel="prefetch" href="/plana/assets/js/547.05b54675.js"><link rel="prefetch" href="/plana/assets/js/548.9c781add.js"><link rel="prefetch" href="/plana/assets/js/549.f1400ef4.js"><link rel="prefetch" href="/plana/assets/js/55.eea26142.js"><link rel="prefetch" href="/plana/assets/js/550.1c4c183f.js"><link rel="prefetch" href="/plana/assets/js/551.a6ea4558.js"><link rel="prefetch" href="/plana/assets/js/552.0d04b29e.js"><link rel="prefetch" href="/plana/assets/js/553.5c2ddf4f.js"><link rel="prefetch" href="/plana/assets/js/554.0a16293a.js"><link rel="prefetch" href="/plana/assets/js/555.015fced4.js"><link rel="prefetch" href="/plana/assets/js/556.6a698949.js"><link rel="prefetch" href="/plana/assets/js/557.fee4398a.js"><link rel="prefetch" href="/plana/assets/js/558.20023b16.js"><link rel="prefetch" href="/plana/assets/js/559.fd760ca6.js"><link rel="prefetch" href="/plana/assets/js/56.8bddb4ea.js"><link rel="prefetch" href="/plana/assets/js/560.27c09de9.js"><link rel="prefetch" href="/plana/assets/js/561.1b28b647.js"><link rel="prefetch" href="/plana/assets/js/562.de1b62da.js"><link rel="prefetch" href="/plana/assets/js/563.3e063e33.js"><link rel="prefetch" href="/plana/assets/js/564.fbdb4383.js"><link rel="prefetch" href="/plana/assets/js/565.6ac66720.js"><link rel="prefetch" href="/plana/assets/js/566.00ccbe3d.js"><link rel="prefetch" href="/plana/assets/js/567.822ff786.js"><link rel="prefetch" href="/plana/assets/js/568.2ebcf522.js"><link rel="prefetch" href="/plana/assets/js/569.ee2e3485.js"><link rel="prefetch" href="/plana/assets/js/57.ff655a80.js"><link rel="prefetch" href="/plana/assets/js/570.a9314e9d.js"><link rel="prefetch" href="/plana/assets/js/571.af242a14.js"><link rel="prefetch" href="/plana/assets/js/572.dff86d44.js"><link rel="prefetch" href="/plana/assets/js/573.060ed316.js"><link rel="prefetch" href="/plana/assets/js/574.ecea29a4.js"><link rel="prefetch" href="/plana/assets/js/575.a526b6e0.js"><link rel="prefetch" href="/plana/assets/js/576.1a856efd.js"><link rel="prefetch" href="/plana/assets/js/577.340a24d3.js"><link rel="prefetch" href="/plana/assets/js/578.1e87e5de.js"><link rel="prefetch" href="/plana/assets/js/579.ba400d0d.js"><link rel="prefetch" href="/plana/assets/js/58.6d7395ff.js"><link rel="prefetch" href="/plana/assets/js/580.8470a6ab.js"><link rel="prefetch" href="/plana/assets/js/581.24b8fa46.js"><link rel="prefetch" href="/plana/assets/js/582.11991e75.js"><link rel="prefetch" href="/plana/assets/js/583.1af0e850.js"><link rel="prefetch" href="/plana/assets/js/584.b671635d.js"><link rel="prefetch" href="/plana/assets/js/585.5ec10dae.js"><link rel="prefetch" href="/plana/assets/js/586.cf868939.js"><link rel="prefetch" href="/plana/assets/js/587.e937242b.js"><link rel="prefetch" href="/plana/assets/js/588.9993b844.js"><link rel="prefetch" href="/plana/assets/js/589.040b58f8.js"><link rel="prefetch" href="/plana/assets/js/59.d91c7a50.js"><link rel="prefetch" href="/plana/assets/js/590.7f347f61.js"><link rel="prefetch" href="/plana/assets/js/591.3acb8a8d.js"><link rel="prefetch" href="/plana/assets/js/592.c0fecc8a.js"><link rel="prefetch" href="/plana/assets/js/593.0ee76323.js"><link rel="prefetch" href="/plana/assets/js/594.7e15bb85.js"><link rel="prefetch" href="/plana/assets/js/595.b5540278.js"><link rel="prefetch" href="/plana/assets/js/596.2996c0fa.js"><link rel="prefetch" href="/plana/assets/js/597.3a3b9a07.js"><link rel="prefetch" href="/plana/assets/js/598.510c6ec5.js"><link rel="prefetch" href="/plana/assets/js/599.f7cd0ab9.js"><link rel="prefetch" href="/plana/assets/js/6.23e42cf9.js"><link rel="prefetch" href="/plana/assets/js/60.12c2a97e.js"><link rel="prefetch" href="/plana/assets/js/600.3a511d88.js"><link rel="prefetch" href="/plana/assets/js/601.1620fe4a.js"><link rel="prefetch" href="/plana/assets/js/602.92820a4e.js"><link rel="prefetch" href="/plana/assets/js/603.fa3b8f68.js"><link rel="prefetch" href="/plana/assets/js/604.a75f5d11.js"><link rel="prefetch" href="/plana/assets/js/605.6e16e44e.js"><link rel="prefetch" href="/plana/assets/js/606.3ca54f7c.js"><link rel="prefetch" href="/plana/assets/js/607.ed2521fd.js"><link rel="prefetch" href="/plana/assets/js/608.83c6a7b7.js"><link rel="prefetch" href="/plana/assets/js/609.cc5d05f6.js"><link rel="prefetch" href="/plana/assets/js/61.57554021.js"><link rel="prefetch" href="/plana/assets/js/610.e114869f.js"><link rel="prefetch" href="/plana/assets/js/611.4dfe17f1.js"><link rel="prefetch" href="/plana/assets/js/612.e9e7cdd9.js"><link rel="prefetch" href="/plana/assets/js/613.52fab004.js"><link rel="prefetch" href="/plana/assets/js/614.03e68635.js"><link rel="prefetch" href="/plana/assets/js/615.b5b202c3.js"><link rel="prefetch" href="/plana/assets/js/616.55d3ec0f.js"><link rel="prefetch" href="/plana/assets/js/617.caa80506.js"><link rel="prefetch" href="/plana/assets/js/618.97c71cdd.js"><link rel="prefetch" href="/plana/assets/js/619.506d3336.js"><link rel="prefetch" href="/plana/assets/js/62.c471c2b6.js"><link rel="prefetch" href="/plana/assets/js/620.d265d33b.js"><link rel="prefetch" href="/plana/assets/js/621.c7274a04.js"><link rel="prefetch" href="/plana/assets/js/622.78f88193.js"><link rel="prefetch" href="/plana/assets/js/623.460ecfe4.js"><link rel="prefetch" href="/plana/assets/js/624.af5db8f4.js"><link rel="prefetch" href="/plana/assets/js/625.b8b56400.js"><link rel="prefetch" href="/plana/assets/js/626.5f935139.js"><link rel="prefetch" href="/plana/assets/js/627.5eae5139.js"><link rel="prefetch" href="/plana/assets/js/628.b76c4230.js"><link rel="prefetch" href="/plana/assets/js/629.b5df5447.js"><link rel="prefetch" href="/plana/assets/js/63.a859b22b.js"><link rel="prefetch" href="/plana/assets/js/630.b4353e1e.js"><link rel="prefetch" href="/plana/assets/js/631.f52d250f.js"><link rel="prefetch" href="/plana/assets/js/632.fb3cd435.js"><link rel="prefetch" href="/plana/assets/js/633.d11743c5.js"><link rel="prefetch" href="/plana/assets/js/634.f274f0f2.js"><link rel="prefetch" href="/plana/assets/js/635.e4b93eee.js"><link rel="prefetch" href="/plana/assets/js/636.ddfe36dc.js"><link rel="prefetch" href="/plana/assets/js/637.773dfbf9.js"><link rel="prefetch" href="/plana/assets/js/638.5d3283ef.js"><link rel="prefetch" href="/plana/assets/js/639.1182aa0e.js"><link rel="prefetch" href="/plana/assets/js/64.3933d035.js"><link rel="prefetch" href="/plana/assets/js/640.fc30215e.js"><link rel="prefetch" href="/plana/assets/js/641.8fa04f8c.js"><link rel="prefetch" href="/plana/assets/js/642.9adc9013.js"><link rel="prefetch" href="/plana/assets/js/643.c553c77d.js"><link rel="prefetch" href="/plana/assets/js/644.f45f12bc.js"><link rel="prefetch" href="/plana/assets/js/645.45551213.js"><link rel="prefetch" href="/plana/assets/js/646.20f8455d.js"><link rel="prefetch" href="/plana/assets/js/647.f83d8512.js"><link rel="prefetch" href="/plana/assets/js/648.d2116c6d.js"><link rel="prefetch" href="/plana/assets/js/649.7c63bf5a.js"><link rel="prefetch" href="/plana/assets/js/65.c73421f0.js"><link rel="prefetch" href="/plana/assets/js/650.a8d4d68c.js"><link rel="prefetch" href="/plana/assets/js/651.660dc950.js"><link rel="prefetch" href="/plana/assets/js/652.e4a8d299.js"><link rel="prefetch" href="/plana/assets/js/653.d5cb1829.js"><link rel="prefetch" href="/plana/assets/js/654.06347c17.js"><link rel="prefetch" href="/plana/assets/js/655.1407708a.js"><link rel="prefetch" href="/plana/assets/js/656.c8c6bc8b.js"><link rel="prefetch" href="/plana/assets/js/657.5bfffe54.js"><link rel="prefetch" href="/plana/assets/js/658.548e92c7.js"><link rel="prefetch" href="/plana/assets/js/659.e6f86d89.js"><link rel="prefetch" href="/plana/assets/js/66.db88a898.js"><link rel="prefetch" href="/plana/assets/js/660.68b4f9c1.js"><link rel="prefetch" href="/plana/assets/js/661.7c1843eb.js"><link rel="prefetch" href="/plana/assets/js/662.fd5c9c14.js"><link rel="prefetch" href="/plana/assets/js/663.2a29079b.js"><link rel="prefetch" href="/plana/assets/js/664.f7e273fb.js"><link rel="prefetch" href="/plana/assets/js/665.92739f4f.js"><link rel="prefetch" href="/plana/assets/js/666.c9dfc4da.js"><link rel="prefetch" href="/plana/assets/js/667.e4e37653.js"><link rel="prefetch" href="/plana/assets/js/668.753f6377.js"><link rel="prefetch" href="/plana/assets/js/669.26bfae22.js"><link rel="prefetch" href="/plana/assets/js/67.ad91902f.js"><link rel="prefetch" href="/plana/assets/js/670.a70329fc.js"><link rel="prefetch" href="/plana/assets/js/671.11637c8c.js"><link rel="prefetch" href="/plana/assets/js/672.9a3410bf.js"><link rel="prefetch" href="/plana/assets/js/673.5f4041b7.js"><link rel="prefetch" href="/plana/assets/js/674.7a725878.js"><link rel="prefetch" href="/plana/assets/js/675.d55427e9.js"><link rel="prefetch" href="/plana/assets/js/676.eb15c05a.js"><link rel="prefetch" href="/plana/assets/js/677.98c18ede.js"><link rel="prefetch" href="/plana/assets/js/678.db86b061.js"><link rel="prefetch" href="/plana/assets/js/679.972243d8.js"><link rel="prefetch" href="/plana/assets/js/68.3e6dcf8f.js"><link rel="prefetch" href="/plana/assets/js/680.d9e2eba1.js"><link rel="prefetch" href="/plana/assets/js/681.8e0783ae.js"><link rel="prefetch" href="/plana/assets/js/682.a0c2e943.js"><link rel="prefetch" href="/plana/assets/js/683.d9a0e0b6.js"><link rel="prefetch" href="/plana/assets/js/684.19b16b09.js"><link rel="prefetch" href="/plana/assets/js/685.1dfde878.js"><link rel="prefetch" href="/plana/assets/js/686.5ebd864b.js"><link rel="prefetch" href="/plana/assets/js/687.9d3c3ee0.js"><link rel="prefetch" href="/plana/assets/js/688.7a8d52a4.js"><link rel="prefetch" href="/plana/assets/js/689.43733f87.js"><link rel="prefetch" href="/plana/assets/js/69.0c93e68b.js"><link rel="prefetch" href="/plana/assets/js/690.b3cc0545.js"><link rel="prefetch" href="/plana/assets/js/691.f0c9f432.js"><link rel="prefetch" href="/plana/assets/js/692.fe5d277f.js"><link rel="prefetch" href="/plana/assets/js/693.f2a5bc91.js"><link rel="prefetch" href="/plana/assets/js/694.0afc8ee3.js"><link rel="prefetch" href="/plana/assets/js/695.02d143c2.js"><link rel="prefetch" href="/plana/assets/js/696.fc35e844.js"><link rel="prefetch" href="/plana/assets/js/697.59baff52.js"><link rel="prefetch" href="/plana/assets/js/698.32395aca.js"><link rel="prefetch" href="/plana/assets/js/699.49a455e0.js"><link rel="prefetch" href="/plana/assets/js/7.4d84b003.js"><link rel="prefetch" href="/plana/assets/js/70.02b035df.js"><link rel="prefetch" href="/plana/assets/js/71.50c27702.js"><link rel="prefetch" href="/plana/assets/js/72.d0b51e9d.js"><link rel="prefetch" href="/plana/assets/js/73.88fbc437.js"><link rel="prefetch" href="/plana/assets/js/74.4323b154.js"><link rel="prefetch" href="/plana/assets/js/75.c07fede3.js"><link rel="prefetch" href="/plana/assets/js/76.d17b982e.js"><link rel="prefetch" href="/plana/assets/js/77.2c2c823d.js"><link rel="prefetch" href="/plana/assets/js/78.6339cdb8.js"><link rel="prefetch" href="/plana/assets/js/79.08610500.js"><link rel="prefetch" href="/plana/assets/js/8.28fd7fea.js"><link rel="prefetch" href="/plana/assets/js/80.fd045bb2.js"><link rel="prefetch" href="/plana/assets/js/81.c563629a.js"><link rel="prefetch" href="/plana/assets/js/82.f186782c.js"><link rel="prefetch" href="/plana/assets/js/83.5b829c7f.js"><link rel="prefetch" href="/plana/assets/js/84.0edd8a25.js"><link rel="prefetch" href="/plana/assets/js/85.cb1c8ff9.js"><link rel="prefetch" href="/plana/assets/js/86.6e0b2f9b.js"><link rel="prefetch" href="/plana/assets/js/87.36b6b2f5.js"><link rel="prefetch" href="/plana/assets/js/88.a23a2afa.js"><link rel="prefetch" href="/plana/assets/js/89.765b2b9d.js"><link rel="prefetch" href="/plana/assets/js/9.59274a6f.js"><link rel="prefetch" href="/plana/assets/js/90.a62aad9b.js"><link rel="prefetch" href="/plana/assets/js/91.96d9b5fa.js"><link rel="prefetch" href="/plana/assets/js/92.b7f7e048.js"><link rel="prefetch" href="/plana/assets/js/93.c7a06bfe.js"><link rel="prefetch" href="/plana/assets/js/94.097b631a.js"><link rel="prefetch" href="/plana/assets/js/95.cdb222d4.js"><link rel="prefetch" href="/plana/assets/js/96.5a864796.js"><link rel="prefetch" href="/plana/assets/js/97.7478b98b.js"><link rel="prefetch" href="/plana/assets/js/98.c9fff4ca.js"><link rel="prefetch" href="/plana/assets/js/99.1e106589.js">
    <link rel="stylesheet" href="/plana/assets/css/0.styles.e9cba6b3.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/plana/" class="home-link router-link-active"><!----> <span class="site-name">Plana(方案A)</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Service Java(者)" class="dropdown-title"><span class="title">Service Java(者)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch1-core-oop/" class="nav-link">
  Core Oop
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch2-utils-crud/" class="nav-link">
  Utils Crud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch3-web-springboot/" class="nav-link">
  Web Springboot
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch4-micro-cloud/" class="nav-link">
  Micro Cloud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch5-devops-native/" class="nav-link">
  Devops Native
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch6-platform-faas/" class="nav-link">
  Platform Faas
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch7-perf-jvm/" class="nav-link">
  Perf Jvm
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch8-arch-pmp/" class="nav-link">
  Arch Pmp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Ui Javascript(皆)" class="dropdown-title"><span class="title">Ui Javascript(皆)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch1-core-prototype/" class="nav-link">
  Core Prototype
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch2-web3-html5/" class="nav-link router-link-active">
  Web3 Html5
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch3-component-mvc/" class="nav-link">
  Component Mvc
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch4-service-nodejs/" class="nav-link">
  Service Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/" class="nav-link">
  Devops Scaffold
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch6-hybrid-webapp/" class="nav-link">
  Hybrid Webapp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch7-visualizing-chart/" class="nav-link">
  Visualizing Chart
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch8-interaction-gl/" class="nav-link">
  Interaction Gl
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Data Python(数)" class="dropdown-title"><span class="title">Data Python(数)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch1-core-pymath/" class="nav-link">
  Core Pymath
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch2-utils-dataset/" class="nav-link">
  Utils Dataset
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch3-service-flask/" class="nav-link">
  Service Flask
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch4-bigdata-analysis/" class="nav-link">
  Bigdata Analysis
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch5-devops-auto/" class="nav-link">
  Devops Auto
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch6-ai-machine/" class="nav-link">
  Ai Machine
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch7-visualizing-gui/" class="nav-link">
  Visualizing Gui
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch8-control-embed/" class="nav-link">
  Control Embed
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于" class="dropdown-title"><span class="title">关于</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/luo0412" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/plana/about-me.html" class="nav-link">
  关于我
</a></li><li class="dropdown-item"><!----> <a href="/plana/md-style.html" class="nav-link">
  笔记风格
</a></li><li class="dropdown-item"><!----> <a href="/plana/related-links.html" class="nav-link">
  友情链接
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Service Java(者)" class="dropdown-title"><span class="title">Service Java(者)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch1-core-oop/" class="nav-link">
  Core Oop
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch2-utils-crud/" class="nav-link">
  Utils Crud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch3-web-springboot/" class="nav-link">
  Web Springboot
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch4-micro-cloud/" class="nav-link">
  Micro Cloud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch5-devops-native/" class="nav-link">
  Devops Native
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch6-platform-faas/" class="nav-link">
  Platform Faas
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch7-perf-jvm/" class="nav-link">
  Perf Jvm
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch8-arch-pmp/" class="nav-link">
  Arch Pmp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Ui Javascript(皆)" class="dropdown-title"><span class="title">Ui Javascript(皆)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch1-core-prototype/" class="nav-link">
  Core Prototype
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch2-web3-html5/" class="nav-link router-link-active">
  Web3 Html5
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch3-component-mvc/" class="nav-link">
  Component Mvc
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch4-service-nodejs/" class="nav-link">
  Service Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/" class="nav-link">
  Devops Scaffold
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch6-hybrid-webapp/" class="nav-link">
  Hybrid Webapp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch7-visualizing-chart/" class="nav-link">
  Visualizing Chart
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch8-interaction-gl/" class="nav-link">
  Interaction Gl
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Data Python(数)" class="dropdown-title"><span class="title">Data Python(数)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch1-core-pymath/" class="nav-link">
  Core Pymath
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch2-utils-dataset/" class="nav-link">
  Utils Dataset
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch3-service-flask/" class="nav-link">
  Service Flask
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch4-bigdata-analysis/" class="nav-link">
  Bigdata Analysis
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch5-devops-auto/" class="nav-link">
  Devops Auto
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch6-ai-machine/" class="nav-link">
  Ai Machine
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch7-visualizing-gui/" class="nav-link">
  Visualizing Gui
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch8-control-embed/" class="nav-link">
  Control Embed
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于" class="dropdown-title"><span class="title">关于</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/luo0412" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/plana/about-me.html" class="nav-link">
  关于我
</a></li><li class="dropdown-item"><!----> <a href="/plana/md-style.html" class="nav-link">
  笔记风格
</a></li><li class="dropdown-item"><!----> <a href="/plana/related-links.html" class="nav-link">
  友情链接
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/" aria-current="page" class="sidebar-link">README</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/01--ji-chu--liu-lan-qi-ji-ben-yuan-li-render.html" class="sidebar-link">[基础]浏览器基本原理(Render)</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/02--ji-chu--ji-ji-yong-baohtml5.html" aria-current="page" class="active sidebar-link">[基础]积极拥抱HTML5</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/04--ji-chu-css-bu-ju-yu-ji-qiao-bfc.html" class="sidebar-link">[基础]CSS布局与技巧(BFC)</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/05-note-css-shi-jie-201712.html" class="sidebar-link">[Note]CSS世界</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/06-note-css-jie-mi-201604.html" class="sidebar-link">[Note]CSS揭秘</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/08-note-javascript-dom-bian-cheng-yi-shu-201104-v2.html" class="sidebar-link">[Note]JavaScript-DOM编程艺术(v2)</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/09--ji-chu--shi-jian-xi-tong--wei-tuo-he-cheng.html" class="sidebar-link">[基础]事件系统(委托+合成)</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/11--fang-an--liu-lan-qi--diao-shi-ji-qiao.html" class="sidebar-link">[方案]浏览器-调试技巧</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/12-note--ni-bu-zhi-dao-dechrome-diao-shi-ji-qiao.html" class="sidebar-link">[Note]你不知道的Chrome调试技巧</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Async</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/async/01--ji-chu--yi-bu-bian-cheng-fa-zhan-shi-promise.html" class="sidebar-link">[基础]异步编程-发展史(Promise)</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/async/02--ti-gang--qing-qiu-ku-fetch-axios.html" class="sidebar-link">[提纲]请求库(Fetch+Axios)</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/async/04--ji-chu--kua-yu-qing-qiu.html" class="sidebar-link">[基础]跨域请求</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Codepen</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Case</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/codepen/case/03--chang-jing--jie-ri-jia-qi.html" class="sidebar-link">[场景]节日假期</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/codepen/01--ti-gang--dong-xiao-fang-an-css3-canvas-gl.html" class="sidebar-link">[提纲]动效方案(CSS3+Canvas+GL)</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/codepen/02--ti-gang--chang-yong-dong-hua-ji.html" class="sidebar-link">[提纲]常用动画集</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Html5</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/html5/01--ti-gang--pan-dianhtml5-deapi.html" class="sidebar-link">[提纲]盘点HTML5的API</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/html5/06--ji-chu-web-components.html" class="sidebar-link">[基础]Web Components</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/html5/08-note-html5-canvas-he-xin-ji-shu.html" class="sidebar-link">[Note]HTML5 Canvas核心技术</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Ie Fix</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/ie-fix/01--fang-an-ie-liu-lan-qi--zheng-ti-jian-rong-fang-an-xp.html" class="sidebar-link">[方案]IE浏览器-整体兼容方案(xp)</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/ie-fix/02--fang-an-ie8-jian-rong-chu-li.html" class="sidebar-link">[方案]IE8+兼容处理</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Jquery</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/jquery/01--ji-chu-jquery.html" class="sidebar-link">[基础]jQuery</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/jquery/02--gui-fan-jquery--zheng-que-shi-yong-zi-shi.html" class="sidebar-link">[规范]jQuery的正确使用姿势</a></li><li><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/jquery/04--si-kao-jquery-de-yi-chan.html" class="sidebar-link">[思考]jQuery的遗产</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="基础-积极拥抱html5"><a href="#基础-积极拥抱html5" class="header-anchor">#</a> [基础]积极拥抱HTML5</h1> <blockquote><p>渐近增强 优雅降级</p></blockquote> <h1 id="html5-资源"><a href="#html5-资源" class="header-anchor">#</a> HTML5-资源</h1> <ul><li><p>MDN-HTML5 @nice</p> <ul><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>html5tricks</p> <ul><li><a href="https://www.html5tricks.com/" target="_blank" rel="noopener noreferrer">https://www.html5tricks.com/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>HTML5秘籍</p> <ul><li><a href="http://www.prosetech.com/html5" target="_blank" rel="noopener noreferrer">http://www.prosetech.com/html5<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="html-标签"><a href="#html-标签" class="header-anchor">#</a> HTML-标签</h1> <ul><li><p>Markup Language（例如xml,html）是<code>GUI发展历史上的错误</code>吗？@digest</p> <ul><li><a href="http://www.zhihu.com/question/338772856" target="_blank" rel="noopener noreferrer">http://www.zhihu.com/question/338772856<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>html5doctor</p> <ul><li>争论HTML的论坛 @old</li> <li><a href="http://html5doctor.com" target="_blank" rel="noopener noreferrer">http://html5doctor.com<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="html-结构"><a href="#html-结构" class="header-anchor">#</a> HTML-结构</h1> <ul><li><p>带你玩转prefetch, preload, dns-prefetch，defer和async</p> <ul><li><a href="https://segmentfault.com/a/1190000011577248" target="_blank" rel="noopener noreferrer">https://segmentfault.com/a/1190000011577248<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>preload与prefetch</p> <ul><li>可以在 PC 中使用 preload 来刷新资源的缓存，但在移动端则需要特别慎重，因为可能会浪费用户的带宽。</li> <li>preload 加载页面必需的资源如 CDN 上的字体文件，与 prefetch 预测加载下一屏数据，兴许是个不错的组合。</li> <li><a href="https://juejin.im/post/5a7fb09bf265da4e8e785c38" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5a7fb09bf265da4e8e785c38<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://www.w3cplus.com/performance/reloading/preload-prefetch-and-priorities-in-chrome.html" target="_blank" rel="noopener noreferrer">https://www.w3cplus.com/performance/reloading/preload-prefetch-and-priorities-in-chrome.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>究极完美体</p></li></ul> <div class="language-html extra-class"><pre class="language-html"><code>
<span class="token doctype">&lt;!DOCTYPE html&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>zh-Hans<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>utf-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>renderer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>webkit|ie-comp|ie-stand<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>IE=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Faster<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>dns-prefetch<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>//cdn.cn/<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> --&gt;

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>preload<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>//cdn.cn/webfont.woff2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>font<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>preload<span class="token punctuation">&quot;</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>font<span class="token punctuation">&quot;</span></span> <span class="token attr-name">crossorigin</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>preload<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>//cdn.cn/Page1-A.js<span class="token punctuation">&quot;</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>script<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>preload<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>//cdn.cn/Page1-B.js<span class="token punctuation">&quot;</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>script<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>prefetch<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>//cdn.cn/Page2.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>prefetch<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>//cdn.cn/Page3.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>prefetch<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>//cdn.cn/Page4.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 

  <span class="token comment">&lt;!-- &lt;link href=&quot;https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css&quot; rel=&quot;stylesheet&quot;&gt; --&gt;</span>
  <span class="token comment">&lt;!-- &lt;link href=&quot;https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt; --&gt;</span>
  <span class="token comment">&lt;!-- &lt;link href=&quot;https://cdn.bootcss.com/tailwindcss/0.7.3/utilities.min.css&quot; rel=&quot;stylesheet&quot;&gt; --&gt;</span>

  <span class="token comment">&lt;!-- &lt;link href=&quot;/static/css/_style.css&quot; rel=&quot;stylesheet&quot;&gt;   --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text/css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">

  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

  <span class="token comment">&lt;!--[if lt IE 9]&gt;
    &lt;script src=&quot;https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js&quot;&gt;&lt;/script&gt;
  &lt;![endif]--&gt;</span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- &lt;script src=&quot;http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js&quot;&gt;&lt;/script&gt; --&gt;</span>
<span class="token comment">&lt;!-- &lt;script src=&quot;https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js&quot;&gt;&lt;/script&gt; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>//cdn.cn/Page1-A.js<span class="token punctuation">&quot;</span></span> <span class="token attr-name">defer</span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>//cdn.cn/Page1-B.js<span class="token punctuation">&quot;</span></span> <span class="token attr-name">defer</span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">

</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h1 id="html5-常见问题-faq"><a href="#html5-常见问题-faq" class="header-anchor">#</a> HTML5-常见问题 @faq</h1> <ul><li>防止密码框自动填充密码</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>先用文本框冒充<span class="token operator">...</span>

<span class="token comment">// 貌似无效??</span>
input<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">'password'</span> 
input<span class="token punctuation">.</span>autocomplete <span class="token operator">=</span> <span class="token string">'new-password'</span>
</code></pre></div><hr> <h1 id="meta"><a href="#meta" class="header-anchor">#</a> Meta</h1> <ul><li><p>常用META</p> <ul><li><a href="https://github.com/joshbuchea/HEAD" target="_blank" rel="noopener noreferrer">https://github.com/joshbuchea/HEAD<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>@zh https://github.com/Amery2010/HEAD</li></ul></li> <li><p>移动前端不得不了解的HTML5 head 头标签（2016最新版）</p> <ul><li><a href="http://www.css88.com/archives/6410" target="_blank" rel="noopener noreferrer">http://www.css88.com/archives/6410<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>HTML 文档之 Head 最佳实践</p> <ul><li><a href="https://juejin.im/entry/5a5395d76fb9a01c9e45d027" target="_blank" rel="noopener noreferrer">https://juejin.im/entry/5a5395d76fb9a01c9e45d027<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 移动厂商特有的值</span>
<span class="token operator">&lt;</span>meta name<span class="token operator">=</span><span class="token string">&quot;apple-mobile-web-app-status-bar-style&quot;</span> content<span class="token operator">=</span><span class="token string">&quot;black&quot;</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>meta name<span class="token operator">=</span><span class="token string">&quot;format-detection&quot;</span> content<span class="token operator">=</span><span class="token string">&quot;telephone=no&quot;</span><span class="token operator">&gt;</span>
</code></pre></div><ul><li>图标</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>image/png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>16x16<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/path/to/favicon-16x16.png<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>image/png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>32x32<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/path/to/favicon-32x32.png<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>image/png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>96x96<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>/path/to/favicon-96x96.png<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 每30秒中刷新当前页面 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>refresh<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>30<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 渲染模式 ========= --&gt;</span>
<span class="token comment">&lt;!-- 启用360浏览器的极速模式(webkit) --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>renderer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>webkit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>renderer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>webkit|ie-comp|ie-stand<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
<span class="token comment">&lt;!-- 避免IE使用兼容模式 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>IE=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 视图窗口，移动端特属的标签。 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> 
  <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- pc端调整页面兼容代码 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>IE=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>renderer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>webkit|ie-comp|ie-stand<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 微软的老式浏览器 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>MobileOptimized<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>320<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 不让百度转码 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Cache-Control<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>no-siteapp<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>

<span class="token comment">&lt;!-- IOS相关 ====== --&gt;</span>
<span class="token comment">&lt;!-- 是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>apple-mobile-web-app-capable<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>yes<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置。 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>apple-mobile-web-app-status-bar-style<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>black<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 忽略页面中的数字识别为电话号码,email识别 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>format-detection<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>telephone=no, email=no<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>HandheldFriendly<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- windows phone 点击无高光 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>msapplication-tap-highlight<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>no<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 强制竖屏 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>screen-orientation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>portrait<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> <span class="token comment">&lt;!-- uc强制竖屏 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>x5-orientation<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>portrait<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> <span class="token comment">&lt;!-- QQ强制竖屏 --&gt;</span>
<span class="token comment">&lt;!-- 强制全屏 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>full-screen<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>yes<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> <span class="token comment">&lt;!-- UC强制全屏 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>x5-fullscreen<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> <span class="token comment">&lt;!-- QQ强制全屏 --&gt;</span>
<span class="token comment">&lt;!-- 应用模式 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>browsermode<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>application<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> <span class="token comment">&lt;!-- UC应用模式 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>x5-page-mode<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> <span class="token comment">&lt;!-- QQ应用模式 --&gt;</span>

<span class="token comment">&lt;!-- 设置页面不缓存 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>pragma<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>no-cache<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>cache-control<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>no-cache<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>expires<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h1 id="html-表单"><a href="#html-表单" class="header-anchor">#</a> HTML-表单</h1> <ul><li>chrome添加语音搜索</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--  x-webkit-speech --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>s<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>s<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>inputText<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>输入关键词<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">x-webkit-speech</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h1 id="yaml"><a href="#yaml" class="header-anchor">#</a> YAML</h1> <ul><li><p>yaml.org</p> <ul><li><a href="http://yaml.org" target="_blank" rel="noopener noreferrer">http://yaml.org<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>更容易被人类阅读的语言格式</li> <li>file.readYAML()</li></ul></li> <li><p>YAML 语言教程</p> <ul><li><a href="http://www.ruanyifeng.com/blog/2016/07/yaml.html" target="_blank" rel="noopener noreferrer">http://www.ruanyifeng.com/blog/2016/07/yaml.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>JS-YAML</p> <ul><li><a href="https://github.com/nodeca/js-yaml" target="_blank" rel="noopener noreferrer">https://github.com/nodeca/js-yaml<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>把函数和正则表达式转为字符串</li></ul></li></ul> <hr> <h1 id="积极拥抱html5"><a href="#积极拥抱html5" class="header-anchor">#</a> 积极拥抱HTML5</h1> <ul><li>HTML5为什么不用指定doctype</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token constant">HTML5</span> 不基于 <span class="token constant">SGML</span>，
因此不需要对<span class="token constant">DTD</span>进行引用，
但是需要doctype来规范浏览器的行为
</code></pre></div><h1 id="html5-2"><a href="#html5-2" class="header-anchor">#</a> HTML5.2</h1> <ul><li>What’s New in HTML 5.2?
<ul><li><a href="https://bitsofco.de/whats-new-in-html-5-2" target="_blank" rel="noopener noreferrer">https://bitsofco.de/whats-new-in-html-5-2<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>每个前端工程师都应该了解的HTML5.2
<ul><li><a href="https://juejin.im/post/5a54cc75518825734107cd73" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5a54cc75518825734107cd73<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>dialog</li> <li>支付请求API</li></ul></li></ul> <h1 id="元素更迭史"><a href="#元素更迭史" class="header-anchor">#</a> 元素更迭史</h1> <ul><li>HTML5 Differences from HTML4
<ul><li><a href="https://www.w3.org/TR/html5-diff" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/html5-diff<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>nobr<span class="token operator">&gt;</span>  <span class="token operator">--</span><span class="token operator">&gt;</span> 被css white<span class="token operator">-</span>space<span class="token operator">:</span> nowrap 代替

<span class="token comment">// 可访问性的失败尝试</span>
tabindex <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token operator">|</span><span class="token number">0</span>  
accesskey <span class="token comment">// 按键紊乱</span>

<span class="token operator">&lt;</span>nav<span class="token operator">&gt;</span><span class="token operator">&lt;</span>footer<span class="token operator">&gt;</span><span class="token operator">&lt;</span>time<span class="token operator">&gt;</span><span class="token operator">&lt;</span>object<span class="token operator">&gt;</span><span class="token operator">...</span>
<span class="token operator">&lt;</span>abbr title<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>base<span class="token operator">&gt;</span>的target _blank
<span class="token operator">&lt;</span>embed<span class="token operator">&gt;</span> <span class="token comment">// 对规范来说是新的 加入插件</span>

<span class="token operator">&lt;</span>iframe<span class="token operator">&gt;</span>   Youtube窗口<span class="token punctuation">,</span> 广告和谷歌搜索框
<span class="token comment">// 新增srcdoc sandbox seamless等属性</span>

<span class="token operator">&lt;</span>small<span class="token operator">&gt;</span>  <span class="token comment">// 附属细则，页脚的法律条款</span>
<span class="token operator">&lt;</span>hr<span class="token operator">&gt;</span>     <span class="token comment">// 主题转换</span>
<span class="token operator">&lt;</span>s<span class="token operator">&gt;</span>      <span class="token comment">// 不准确或不相关的内容</span>
<span class="token comment">// &lt;b&gt;      // @eg 摘要的关键字</span>
<span class="token operator">&lt;</span>strong<span class="token operator">&gt;</span> <span class="token comment">// 重要</span>
<span class="token operator">&lt;</span>em<span class="token operator">&gt;</span>     <span class="token comment">// 强调  </span>
<span class="token operator">&lt;</span>del<span class="token operator">&gt;</span> <span class="token operator">&lt;</span>ins<span class="token operator">&gt;</span> <span class="token comment">// 原来&lt;s&gt;&lt;strike&gt;</span>
<span class="token operator">&lt;</span>wbr<span class="token operator">&gt;</span> <span class="token comment">// 换行机会 阅读目的 但&lt;nobr&gt;却挂了...</span>

<span class="token comment">// 其他</span>
<span class="token operator">&lt;</span>ol<span class="token operator">&gt;</span> 的 reversed
input和textarea 的autofocus required placeholder
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span> type<span class="token operator">=</span><span class="token string">&quot;application/xml&quot;</span>
<span class="token operator">&lt;</span>html lang<span class="token operator">=</span><span class="token string">&quot;en&quot;</span><span class="token operator">&gt;</span> <span class="token comment">// 方便屏幕阅读器</span>

<span class="token operator">&lt;</span>map<span class="token operator">&gt;</span><span class="token operator">&lt;</span>area<span class="token operator">&gt;</span>

http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>www<span class="token punctuation">.</span>runoob<span class="token punctuation">.</span>com<span class="token operator">/</span><span class="token keyword">try</span><span class="token operator">/</span><span class="token keyword">try</span><span class="token punctuation">.</span>php<span class="token operator">?</span>filename<span class="token operator">=</span>tryhtml_areamap
</code></pre></div><p><img src="/static/images/other/h5-grammar755.png" alt=""></p> <h1 id="html5-语义化"><a href="#html5-语义化" class="header-anchor">#</a> HTML5-语义化</h1> <ul><li><p>分类</p> <ul><li>短语元素 段落 img span</li> <li>区段元素 章式 article nav aside</li> <li>heading 标题 h6 hgroup</li> <li>metadata 元数据 link meta base...</li> <li>flow流元素 span div</li> <li>嵌入式embedd元素 iframe svg</li> <li>交互式interactive元素 a button input select</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>再没有内联元素块元素的概念了，
因为那是外观定义不是语义定义
</code></pre></div><ul><li><p>语义化的优势</p> <ul><li>让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析</li> <li>使阅读源代码的人更容易将网站分块，便于阅读、维护和理解</li> <li>搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>a<span class="token operator">&gt;</span>里可以放置任何东西了
<span class="token operator">&lt;</span>a href<span class="token operator">=</span><span class="token string">&quot;tel:16505551212&quot;</span><span class="token operator">&gt;</span>xxx<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span>
<span class="token comment">// href也不是必需的了</span>

<span class="token comment">//  datalist</span>
<span class="token operator">&lt;</span>input list<span class="token operator">=</span><span class="token string">&quot;browsers&quot;</span><span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>datalist id<span class="token operator">=</span><span class="token string">&quot;browsers&quot;</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>option value<span class="token operator">=</span><span class="token string">&quot;Internet Explorer&quot;</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>option<span class="token operator">&gt;</span><span class="token operator">&lt;</span>option value<span class="token operator">=</span><span class="token string">&quot;Firefox&quot;</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>option<span class="token operator">&gt;</span><span class="token operator">&lt;</span>option value<span class="token operator">=</span><span class="token string">&quot;Chrome&quot;</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>option<span class="token operator">&gt;</span><span class="token operator">&lt;</span>option value<span class="token operator">=</span><span class="token string">&quot;Opera&quot;</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>option<span class="token operator">&gt;</span><span class="token operator">&lt;</span>option value<span class="token operator">=</span><span class="token string">&quot;Safari&quot;</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>option<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>datalist<span class="token operator">&gt;</span>


<span class="token comment">// 交互式属性</span>
contenteditable spellcheck
contextmenu
draggable dropzone

<span class="token comment">// &lt;header&gt;</span>
作网页页眉
作为内容的标题 <span class="token comment">// 一般是附带概要日期等信息的那种</span>
<span class="token comment">// 在页眉中添加看不见的标题&lt;h1&gt; // display:none</span>
<span class="token comment">// 屏幕阅读器，最好每个页面只有一个&lt;h1&gt;</span>


<span class="token operator">&lt;</span>figure <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;FloatLeftFigure&quot;</span> alt<span class="token operator">=</span><span class="token string">&quot;Human skull&quot;</span><span class="token operator">&gt;</span> <span class="token comment">// figure的alt不要为空(/字符串)</span>
    <span class="token operator">&lt;</span>img src<span class="token operator">=</span><span class="token string">&quot;human_skull.jpg&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span> <span class="token comment">// &lt;img&gt;的alt可以删除?</span>
    <span class="token operator">&lt;</span>figcaption<span class="token operator">&gt;</span>Will you be the last person standing <span class="token keyword">if</span> one <span class="token keyword">of</span> these apocalyptic
    scenarios plays out<span class="token operator">?</span><span class="token operator">&lt;</span><span class="token operator">/</span>figcaption<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>figure<span class="token operator">&gt;</span>

<span class="token comment">// &lt;section&gt; 略带语义的块 适合任何以标题开头的区块</span>
<span class="token comment">// 类似bootstrap的样式嵌套还是用div // 因为并没有语义</span>
@eg  About <span class="token constant">US</span>
购物记录和产品清单
分组内容<span class="token punctuation">,</span> <span class="token comment">// 新闻站点中的一组文章 长文档的一部分</span>

<span class="token comment">// HTML5规定footer不能放太多无关内容, 但你可以无视啊 ORZ...</span>
<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">&quot;FatFooter&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>aside<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>img onclick<span class="token operator">=</span><span class="token string">&quot;CloseBox()&quot;</span> src<span class="token operator">=</span><span class="token string">&quot;images/manual/close_icon.png&quot;</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;CloseButton&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>aside<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>footer<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>footer<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

<span class="token comment">// 其他</span>
<span class="token comment">// &lt;details&gt;&lt;summary&gt;&lt;/summary&gt;&lt;/details&gt;折叠框, 还不成熟</span>
details <span class="token operator">*</span> <span class="token punctuation">{</span>display<span class="token operator">:</span>none<span class="token punctuation">;</span> <span class="token punctuation">}</span>
details summary <span class="token punctuation">{</span>display<span class="token operator">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span>
details<span class="token punctuation">[</span>open<span class="token punctuation">]</span> <span class="token operator">*</span> <span class="token punctuation">{</span>display<span class="token operator">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token comment">// &lt;menu&gt;&lt;menuitem&gt; // 类似右键菜单 支持不好</span>
</code></pre></div><ul><li><p>语义化建议</p> <ul><li>尽可能少的使用无语义的标签div和span</li> <li>既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利</li></ul></li></ul> <h1 id="html-校验"><a href="#html-校验" class="header-anchor">#</a> HTML-校验</h1> <ul><li><p>w3c的W3Validator</p></li> <li><p>HTML Validator</p> <ul><li>ff插件</li> <li>基于HTML Tidy,可以美化代码</li></ul></li> <li><p>生成HTML5纲要</p> <ul><li>为了合理结构</li> <li>在线HTML纲要生成器 <a href="http://gsnedders.html5.org/outliner" target="_blank" rel="noopener noreferrer">http://gsnedders.html5.org/outliner<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>Chrome扩展 h5o <a href="http://code.google.com/p/h5o" target="_blank" rel="noopener noreferrer">http://code.google.com/p/h5o<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// h1~h6 层级</span>
<span class="token comment">// 区块根 body,blockquote,td,fieldset</span>
figure<span class="token punctuation">,</span>details 会产生自己的纲要
抓取来的文章放到 article 中就会类推下去
不会有问题

<span class="token comment">// 遇到aside 意外关闭的情况</span>
可以自己写 section <span class="token operator">/</span> div 代替 aside
</code></pre></div><h1 id="html5-seo"><a href="#html5-seo" class="header-anchor">#</a> HTML5-SEO</h1> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// data-*  </span>
<span class="token comment">// jq已经封装</span>
不至于与未来的属性相冲突
与微数据等有关

<span class="token comment">// 文本级的语义元素</span>
<span class="token comment">// &lt;mark&gt;</span>
<span class="token operator">&lt;</span>article<span class="token operator">&gt;</span>
    Published on
    <span class="token operator">&lt;</span>time datetime<span class="token operator">=</span><span class="token string">&quot;2014-03-21 16:30-05:00&quot;</span> pubdate<span class="token operator">&gt;</span> <span class="token comment">// pubdate表示article发布时间</span>
    March <span class="token number">21</span><span class="token operator">&lt;</span>sup<span class="token operator">&gt;</span>st<span class="token operator">&lt;</span>sup<span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">,</span> at <span class="token number">4</span><span class="token operator">:</span><span class="token number">30</span> p<span class="token punctuation">.</span>m<span class="token punctuation">.</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>time<span class="token operator">&gt;</span> <span class="token comment">// &lt;time&gt;表示纽约东五区，下午4点半</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>article<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>form action<span class="token operator">=</span><span class="token string">&quot;#&quot;</span> id<span class="token operator">=</span><span class="token string">&quot;bmiCalculator&quot;</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>label <span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;feet inches&quot;</span><span class="token operator">&gt;</span>Height<span class="token operator">:</span><span class="token operator">&lt;</span><span class="token operator">/</span>label<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>input name<span class="token operator">=</span><span class="token string">&quot;feet&quot;</span><span class="token operator">&gt;</span> feet<span class="token operator">&lt;</span>br<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>label<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>label<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>input name<span class="token operator">=</span><span class="token string">&quot;inches&quot;</span><span class="token operator">&gt;</span> inches<span class="token operator">&lt;</span>br<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>label <span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;pounds&quot;</span><span class="token operator">&gt;</span>Weight<span class="token operator">:</span><span class="token operator">&lt;</span><span class="token operator">/</span>label<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>input name<span class="token operator">=</span><span class="token string">&quot;pounds&quot;</span><span class="token operator">&gt;</span> pounds<span class="token operator">&lt;</span>br<span class="token operator">&gt;</span><span class="token operator">&lt;</span>br<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">&quot;button&quot;</span> name<span class="token operator">=</span><span class="token string">&quot;calc&quot;</span> value<span class="token operator">=</span><span class="token string">&quot;Calculate&quot;</span>
onclick<span class="token operator">=</span>&quot;<span class="token function">CalculateBMI</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">.</span>feet<span class="token punctuation">.</span>value<span class="token punctuation">,</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">.</span>inches<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">.</span>pounds<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token string">'result'</span><span class="token punctuation">)</span>&quot; <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>form<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>p<span class="token operator">&gt;</span>Your <span class="token constant">BMI</span><span class="token operator">:</span> <span class="token operator">&lt;</span>output id<span class="token operator">=</span><span class="token string">&quot;result&quot;</span> form<span class="token operator">=</span><span class="token string">&quot;bmiCalculator&quot;</span> <span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;feet inches pounds&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>output<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>


<span class="token comment">// 其他语义标准</span>
<span class="token constant">ARIA</span> 屏幕阅读器，通过属性 <span class="token comment">// @eg  &lt;header role=&quot;banner&quot;&gt;</span>
RDFa 属性，笨重
微格式 Microformats<span class="token punctuation">,</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;vCard&quot;</span>
微数据

<span class="token comment">// &lt;div itemscope itemtype=&quot;http://data-vocabulary.org/Review&quot;&gt;</span>
<span class="token comment">// &lt;h1 itemprop=&quot;itemreviewed&quot;&gt;Jan's Pizza House&lt;/h1&gt;</span>
<span class="token comment">// &lt;p&gt;Reviewed by &lt;span itemprop=&quot;reviewer&quot;&gt;Jared Elberadi&lt;/span&gt; on</span>
<span class="token comment">// &lt;time itemprop=&quot;dtreviewed&quot; datetime=&quot;2011-01-26&quot;&gt;January 26&lt;/time&gt;.&lt;p&gt;</span>
<span class="token comment">// &lt;p itemprop=&quot;summary&quot;&gt;Pretty bad, and then the Health Department showed up.&lt;/p&gt;</span>
<span class="token comment">// &lt;p itemprop=&quot;description&quot;&gt;...&lt;/p&gt;</span>
<span class="token comment">// &lt;p&gt;Rating: &lt;span itemprop=&quot;rating&quot;&gt;0.5&lt;/span&gt;&lt;/p&gt;</span>
<span class="token comment">// &lt;/div&gt;</span>


<span class="token comment">// 元数据有关工具</span>
Semantic inspector扩展 <span class="token comment">// 提取页面元数据</span>
Rich Snippets工具
Structured Data Testing Tools <span class="token comment">// https://search.google.com/structured-data/testing-tool</span>

<span class="token comment">// 谷歌对什么数据视而不见?</span>
语义数据不是主要内容 网站只包含很少的语义数据

<span class="token comment">// 谷歌不使用css隐藏的语义数据</span>
</code></pre></div><h1 id="html5-组件进化"><a href="#html5-组件进化" class="header-anchor">#</a> HTML5-组件进化</h1> <ul><li><p>web表单</p> <ul><li><a href="https://github.com/zoltan-dulac/html5Forms.js" target="_blank" rel="noopener noreferrer">html5Forms.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://regexlib.com" target="_blank" rel="noopener noreferrer">http://regexlib.com<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 使用正则表达式验证</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 与服务器通信的方式 // 表单 + XMLHTTPRequest</span>

表单可以不在form里 <span class="token comment">// &lt;input form=&quot;form1&quot;&gt;</span>

<span class="token comment">// 表单验证</span>
<span class="token constant">HTML5</span>不能指定验证的时机 <span class="token comment">// 仅submit时</span>
<span class="token comment">// form或input添加属性novalidate // 测试时关闭验证</span>
<span class="token comment">// 自定义验证 input.setCustomValidity(&quot;&quot;)</span>
<span class="token comment">// form里添加onsubmit=&quot;return validateForm()&quot;</span>

<span class="token comment">// 验证方式</span>
客户端验证 <span class="token comment">// 减少填表人的麻烦</span>
服务端验证 <span class="token comment">// 真正确保数据正确性</span>

<span class="token comment">// 验证样式</span>
required和optional <span class="token comment">// aria-required=&quot;true&quot; 增强可访问性</span>
valid和invalid
<span class="token keyword">in</span><span class="token operator">-</span>range和out<span class="token operator">-</span><span class="token keyword">of</span><span class="token operator">-</span>range
<span class="token comment">// readonly与disabled // 能否随form提交</span>

element<span class="token punctuation">.</span>validity <span class="token comment">// 8/10种表单控件属性</span>

<span class="token comment">// 伪类使用</span>
input<span class="token operator">:</span>required<span class="token operator">:</span>invalid
input<span class="token operator">:</span>placeholder<span class="token operator">-</span>shown <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token comment">// 输入属性</span>
multiple
<span class="token comment">// autocomplete spellcheck</span>
<span class="token comment">// autocorrect和autocapitalize 移动设备</span>

<span class="token comment">// 新的输入控件</span>
email color progress和meter url <span class="token comment">// url验证很粗略 IOS的键盘显示</span>
range <span class="token comment">// input[type=range] {-webkit-apperance: slider-vertical;}</span>
<span class="token comment">// search // 无障碍阅读 引导</span>
tel <span class="token comment">// 至少不能接受字母</span>
number<span class="token comment">// min max step value</span>
<span class="token comment">// 日期和时间 也支持min和max=&quot;2014-12-31&quot;</span>
datalist
<span class="token comment">// &lt;input id=&quot;&quot; list=&quot;animal&quot;&gt;</span>
<span class="token comment">// datalist优雅降级 内嵌select</span>
<span class="token comment">// &lt;menu&gt;&lt;command&gt;&lt;/command&gt;&lt;menu&gt;创建工具条和菜单?</span>

<span class="token comment">// HTML编辑器</span>
<span class="token comment">// 放在可编辑区内的按钮不能触发事件</span>
contenteditable <span class="token comment">// 编辑元素</span>
designMode <span class="token comment">// 编辑页面</span>
</code></pre></div><h1 id="html5-音频和视频"><a href="#html5-音频和视频" class="header-anchor">#</a> HTML5-音频和视频</h1> <ul><li><p>工具 Amaya | Inkspace</p></li> <li><p>videojs.com</p> <ul><li>换肤定制</li> <li>Handbrake 转码</li> <li><a href="http://videojs.com/" target="_blank" rel="noopener noreferrer">VideoJS<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>视频完全方案 HTML5 + Flash + link</p></li> <li><p>视频自适应</p> <ul><li><a href="https://alistapart.com/article/creating-intrinsic-ratios-for-video" target="_blank" rel="noopener noreferrer">https://alistapart.com/article/creating-intrinsic-ratios-for-video<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>chimee</p></li> <li><p>Captionator.js</p> <ul><li>适时抓取文本</li></ul></li> <li><p><a href="http://www.jplayer.org/" target="_blank" rel="noopener noreferrer">jPlayer<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></li> <li><p><a href="http://audacity.sourceforge.net/" target="_blank" rel="noopener noreferrer">Audacity<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></li> <li><p>GoldWave</p></li> <li><p><a href="http://www.mirovideoconverter.com" target="_blank" rel="noopener noreferrer">Miro Video Converter<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></li> <li><p>Firefox插件<a href="http://firefogg.org/" target="_blank" rel="noopener noreferrer">Firefogg<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></li> <li><p><a href="http://handbrake.fr" target="_blank" rel="noopener noreferrer">HandBrake<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></li> <li><p><a href="http://tinyurl.com/capmarker" target="_blank" rel="noopener noreferrer">微软字幕生成器<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// HTML5视频可以右键下载</span>
版权问题 
录制视频和音频
在线聊天的视频音频“流”
<span class="token operator">--</span><span class="token operator">&gt;</span>  用成熟的Flash

<span class="token comment">// 根据带宽提供不同解析度</span>
高清标清 
低延迟，高性能音频，虚拟合成器
动态创建和编辑视频

<span class="token comment">// &lt;audio&gt; 和 &lt;vedio&gt;属性</span>
preload<span class="token operator">:</span> auto <span class="token operator">|</span> metadata <span class="token operator">|</span> none
controls <span class="token function">autoplay</span><span class="token punctuation">(</span>loop<span class="token punctuation">)</span>
muted poster height weight

<span class="token comment">// 不同媒体相同的mediagroup</span>
不同角度拍摄的体育赛事

<span class="token comment">// 格式</span>
最流行：<span class="token constant">MP3</span>音频 <span class="token constant">H</span> <span class="token number">.264</span> 视频

<span class="token comment">// 编解码器 和 容器格式</span>
<span class="token comment">// 容器</span>
视频 <span class="token operator">+</span> 音频 <span class="token operator">+</span> 描述性信息 <span class="token operator">+</span> 静态图片 <span class="token operator">+</span> 字幕<span class="token operator">...</span>

<span class="token comment">// 格式转换</span>
音频


<span class="token comment">// 后备措施</span>
<span class="token operator">&lt;</span>audio<span class="token operator">&gt;</span><span class="token operator">&lt;</span>source<span class="token operator">&gt;</span>
<span class="token number">1.</span> 上传youtube
<span class="token number">2.</span> Flash<span class="token punctuation">,</span> Flowplayer Flash

<span class="token comment">// manual-VideoWithFlashFallback.html</span>
<span class="token number">3.</span> 若Flash都没装的，提供下载链接

<span class="token comment">// 翻转方案</span>
优先使用Flash<span class="token punctuation">,</span><span class="token constant">H5</span>为后备

<span class="token operator">&lt;</span>object id<span class="token operator">=</span><span class="token string">&quot;flowplayer&quot;</span> width<span class="token operator">=</span><span class="token string">&quot;704&quot;</span> height<span class="token operator">=</span><span class="token string">&quot;400&quot;</span>
data<span class="token operator">=</span><span class="token string">&quot;flowplayer/flowplayer-3.2.16.swf&quot;</span>
type<span class="token operator">=</span><span class="token string">&quot;application/x-shockwave-flash&quot;</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>param name<span class="token operator">=</span><span class="token string">&quot;movie&quot;</span> value<span class="token operator">=</span><span class="token string">&quot;flowplayer/flowplayer-3.2.16.swf&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>param name<span class="token operator">=</span><span class="token string">&quot;flashvars&quot;</span> value<span class="token operator">=</span><span class="token string">'config={&quot;clip&quot;:&quot;beach.mp4&quot;}'</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>video controls width<span class="token operator">=</span><span class="token string">&quot;704&quot;</span> height<span class="token operator">=</span><span class="token string">&quot;400&quot;</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>source src<span class="token operator">=</span><span class="token string">&quot;beach.mp4&quot;</span> type<span class="token operator">=</span><span class="token string">&quot;video/mp4&quot;</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>source src<span class="token operator">=</span><span class="token string">&quot;beach.webm&quot;</span> type<span class="token operator">=</span><span class="token string">&quot;video/webm&quot;</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>video<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>object<span class="token operator">&gt;</span>

<span class="token comment">// 项目</span>
<span class="token constant">JS</span>控制播放器
currentTime play<span class="token operator">|</span>pause

<span class="token comment">// 加载问题 使用一组audio</span>
<span class="token function">canPlayType</span><span class="token punctuation">(</span><span class="token string">&quot;audio/ogg&quot;</span><span class="token punctuation">)</span>

<span class="token comment">// 自定义视频播放器</span>
播放进度条<span class="token comment">// 两个嵌套的div</span>
onTimeUpdate

<span class="token comment">// JS媒体播放器(支持换肤)</span>

<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;video-js-box&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>video <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;video-js&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>video<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>


<span class="token comment">// 视频字幕</span>
WebVTT（一致支持） 和 <span class="token constant">TTML</span>（成熟但复杂）

<span class="token operator">&lt;</span>track<span class="token operator">&gt;</span><span class="token punctuation">,</span>kind属性
<span class="token function">subtitles</span><span class="token punctuation">(</span>外语片<span class="token punctuation">)</span>和 <span class="token function">captains</span><span class="token punctuation">(</span>静音<span class="token punctuation">)</span>

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 嵌入视频 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>video id<span class="token operator">=</span><span class="token string">&quot;myVideo&quot;</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>source src<span class="token operator">=</span><span class="token string">&quot;conference.webm&quot;</span> type<span class="token operator">=</span><span class="token string">&quot;video/webm; codecs='vp8, vorbis'&quot;</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>source src<span class="token operator">=</span><span class="token string">&quot;conference.ogv&quot;</span> type<span class="token operator">=</span><span class="token string">&quot;video/ogg; codecs='theora, vorbis'&quot;</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>source src<span class="token operator">=</span><span class="token string">&quot;conference.mpg&quot;</span><span class="token operator">&gt;</span>
Video player not available<span class="token punctuation">.</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>video<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 嵌入音频 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>audio id<span class="token operator">=</span><span class="token string">&quot;myAudio&quot;</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>source src<span class="token operator">=</span><span class="token string">&quot;song.ogg&quot;</span> type<span class="token operator">=</span><span class="token string">&quot;audio/ogg&quot;</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>source src<span class="token operator">=</span><span class="token string">&quot;song.mp3&quot;</span> type<span class="token operator">=</span><span class="token string">&quot;audio/mpeg&quot;</span><span class="token operator">&gt;</span>
Audio player not available<span class="token punctuation">.</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>audio<span class="token operator">&gt;</span>
</code></pre></div><hr> <h1 id="iframe-非死不可吗"><a href="#iframe-非死不可吗" class="header-anchor">#</a> Iframe-非死不可吗?</h1> <ul><li>iframe的改进
<ul><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/plana/nav.4.ui-javascript/ch2-web3-html5/01--ji-chu--liu-lan-qi-ji-ben-yuan-li-render.html" class="prev">
        [基础]浏览器基本原理(Render)
      </a></span> <span class="next"><a href="/plana/nav.4.ui-javascript/ch2-web3-html5/04--ji-chu-css-bu-ju-yu-ji-qiao-bfc.html">
        [基础]CSS布局与技巧(BFC)
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/plana/assets/js/app.26a35d46.js" defer></script><script src="/plana/assets/js/2.b5bc497d.js" defer></script><script src="/plana/assets/js/338.40b3bfdb.js" defer></script>
  </body>
</html>
